<template>
    <BaseCharts
      ref="baseChartsRef"
      :options="options"
      :autoRander="autoRander"
      :autoNumber="autoNumber"
      :height="height"
      @legendselectchanged="legendselectchanged"
    >
    </BaseCharts>
  </template>
  
  <script setup>
  import { nextTick, ref, watch,onMounted } from "vue";
  import { useEchart } from "@/hooks/useEchart.js";
  import { fontSize } from "@/utils/rem/rem.js";
  import { getChartTootipFormatter } from "@/utils/formatter.js";
  import BaseCharts from "@/components/echarts/vpt-base-chart/index.vue";
  
  const baseChartsRef = ref(null);
  const fontColor = "rgba(255,255,255, 0.5)";
  const options = ref({});
  
  
  const props = defineProps({
  });



  // 使用hooks
  useEchart(getOptions);
  let legendSelect = ref({});
  // const legendselectchanged = (event) => {
  //   legendSelect.value = event.selected;
  //   updateSeries();
  // };
  onMounted(() => {
    getOptions();
  });

  function getOptions() {
    options.value = {
      legend: {
        orient: 'vertical',
        right: '10%', 
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 221, name: '麒麟',itemStyle: {color: '#00B42A'} },
            { value: 24, name: '欧拉' ,itemStyle: {color: '#1AC6FF'}},
            { value: 142, name: '统信' ,itemStyle: {color: '#165DFF'}},
            { value: 122, name: '龙蜥',itemStyle: {color: '#FF7D00'} },
            { value: 73, name: '红旗',itemStyle: {color: '#FFC400'} }
          ],
          label: {
                show: false // 设置为 false 以隐藏标签
            },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
    }
  ]
    };
  }
  function arraysEqual(a, b) {
    if (a.length !== b.length) return false;
    for (let i = 0; i < a.length; i++) {
      if (a[i] !== b[i]) return false;
    }
    return true;
  }
  async function updateSeries() {
    try {
      // const chartInstance = await getEchartsInstance();
      // if (chartInstance) {
      //   const newChartOption = chartInstance.getOption();
      //   newChartOption.legend[0].data = [...props.legendData];
      //   newChartOption.xAxis[0].data = props.xAxisData;
      //   // 遍历 series 更新 data
      //   (newChartOption.series[0].data = props.chartData),
      //     (newChartOption.legend[0].selected = legendSelect.value);
      //   // 更新 series 部分
      //   chartInstance.setOption(newChartOption, false);
      // }
    } catch (error) {
      // console.error("Failed to update chart:", error);
    }
  }
  
  function getEchartsInstance() {
    return new Promise((resolve) => {
      baseChartsRef.value.commonFunc((instance) => resolve(instance));
    });
  }
  
  defineExpose({
    reloadEchart: () => {
      baseChartsRef.value.reloadEchart();
    },
  });
  </script>
  